<template>
	<!-- 职位信息 -->
	<view class="positionInformation">
		<view class="empty"></view>
		<view class="main">
			<view class="header">
				<view class="header-image">
					<image v-if="form.member_info.headimg" :src="form.profilePhoto"></image>
					<image v-else src="@/static/mySelected.png"></image>
				</view>
				<view class="header-main">
					<view class="">
						{{ form.member_info.nickname || form.member_info.mobile }}
					</view>
					<view class="">
						{{ form.create_time }}
					</view>
				</view>
			</view>
			<view class="title">
				{{ form.title }}
			</view>
			<view class="notes">
				<text> {{ form.tags }}</text>
				<text> {{ form.mode_text }}</text>
			</view>
			<view class="content">
				<view class="">
					{{ form.desc }}
				</view>
				<view class="">
					<image :src="image" v-for="image in form.image" :key="image" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="">
				￥<text>{{ form.price }}</text>
			</view>
			<view class="" @click="dial">
				联系卖家
			</view>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			form: {
				member_info: {
					nickname: '',
					headimg: '',
					mobile: '',
				},
				create_time: '',
				// 头像
				profilePhoto: '',
				create_time: '', //时间
				title: '',  //标题
				price: '',	// 价格
				desc: '',	// 描述
				mobile: '',	// 联系方式
				image: '',//图片
				tags: '',//标签
				mode_text: '',//方式
			}
		}
	},
	onLoad(options) {
		this.getInfo(options.id)
	},
	methods: {
		// 获取详情
		getInfo(id) {
			$api.secondhanddDtail({ id: id }).then(res => {
				this.form = res.data.data
				let list = this.form.image.split(',')
				list = list.map(item => {
					return this.$image + item
				})
				this.form.image = list
				this.form.profilePhoto = this.$image + this.form.member_info.headimg
			})
		},
		// 联系
		dial() {
			uni.makePhoneCall({
				phoneNumber: this.form.mobile
			})
		}
	}
}
</script>

<style lang="less" scoped>
.positionInformation {
	background: #FBFBFB;

	.empty {
		height: 14rpx;
	}

	.main {
		width: 702rpx;
		// height: 973rpx;
		height: 985rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
		margin: auto;
		padding: 0 48rpx 0 32rpx;

		.header {
			display: flex;
			align-items: center;
			padding: 31rpx 0 35rpx 0;

			.header-image {
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}

			.header-main {
				view:first-child {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #1C1C1D;
				}

				view:last-child {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #A4A4A7;
				}
			}
		}

		.title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding-bottom: 23rpx;
		}

		.notes {
			text {
				display: inline-block;
				width: 65rpx;
				height: 31rpx;
				text-align: center;
				border-radius: 5rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 31rpx;
			}

			text:first-child {
				color: #F14500;
				border: 1px solid #F14500;
			}

			text:last-child {
				color: #e3d212;
				border: 1px solid #e3d212;
				margin-left: 12rpx;
			}
		}

		.content {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #1F1F1F;
			padding-top: 28rpx;

			image {
				width: 628rpx;
				height: 604rpx;
				margin-top: 22rpx;
			}
		}


	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx 0 70rpx;
		margin-top: 253rpx;

		view:first-child {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F14500;

			text {
				font-size: 36rpx;
			}
		}

		view:last-child {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 255rpx;
			height: 98rpx;
			background: #F14500;
			border-radius: 49rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
</style>